<template>
  <div class="modules-search-content">
    <BlogTabs :list="tabList">
      <template v-slot:all>
        <div class="result-relation-count clearfix">
          <span>相关结果约{{ total }}个</span>
        </div>
        <div class="result-relation-content" ref="result">
          <BlogItem :list="blogList" />
          <LoadingMore
            :loadingStatus="loadingStatus"
            :pageSize="pageSize"
            :toLoadHeight="toLoadHeight"
            :ajaxFun="loadingMore"
            :scrollDom="scrollDom"
          />
        </div>
      </template>
    </BlogTabs>
  </div>
</template>

<script>
export default {
  created() {
    this.params.value = this.$route.query.value
    this.getData()
  },
  activated() {
    if (this.params.value == this.$route.query.value) {
      return
    }
    this.params.value = this.$route.query.value
    this.getData('search')
  },
  mounted() {
    this.scrollDom = this.$refs['result']
  },
  data() {
    return {
      tabList: [
        {
          name: 'all',
          label: '全部',
          id: 1
        }
      ],
      blogList: [],
      total: undefined,
      loadingStatus: 1,
      // 总页数
      pageSize: 4,
      toLoadHeight: 680,
      scrollDom: {},
      params: {
        page: 1,
        limit: 10,
        value: ''
      }
    }
  },
  methods: {
    getData(type) {
      this.$ajax({
        url: this.$ajax.setUrl('/article/search'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.total = data.data.total
          // 代码高亮
          let list = []
          if (this.params.value !== undefined) {
            list = data.data.list.map((item) => {
              item.title = this.$utils.heightLightTxt(this.params.value, item.title)
              item.description = this.$utils.heightLightTxt(this.params.value, item.description)
              return item
            })
          } else {
            list = data.data.list
          }
          if (this.total <= this.params.limit) {
            this.loadingStatus = 3
          }
          if (type == 'search') {
            // 搜索数据直接替换
            this.blogList = list
          } else {
            // 分页加载
            this.blogList.push(...list)
          }

          this.pageSize = Math.ceil(data.data.total / this.params.limit)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    loadingMore(curPage) {
      if (this.loadingStatus === 3) {
        return
      }
      this.loadingStatus = 2

      this.loadingStatus = this.pageSize > curPage ? 1 : 3
      this.params.page++
      this.getData()
    }
  }
}
</script>

<style lang="scss">
.modules-search-content {
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  .result-relation-count {
    & > span {
      float: right;
      color: #999aaa;
      font-size: 12px;
    }
  }
  .result-relation-content {
    .new-blog-item {
      &:first-child {
        padding-top: 5px;
      }
    }
  }
}
</style>
